/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import { NewAppScreen } from '@react-native/new-app-screen';
import { Alert, Button, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native';
import ChildCom from './AppCompents/ChildCom';
import { useState } from 'react';
import App3 from './AppCompents/状态更新';
// 父子组件传参需要提前定义类型
type ChildPropsType={
  name:string,
  color:string
}
function App() {
  
  return (
    <View style={styles.container}>
   <Child color='red' name='张三'/>
   <Child2 color='red' name='张三'/>
   <App3 />
    </View>
  );
}

// 传参-解构--把类型解构’解开‘--提高子组件可读性--某些子组件不需要的参数传不传都可以
 function Child2({name}:ChildPropsType){
  return(
    <View>
      <Text>子组件</Text>
      <Text >{name}</Text>
    </View>
  )

}function Child(props:ChildPropsType){
  return(
    <View>
      <Text>子组件</Text>
      <Text style={{color:props.color}}>{props.name}</Text>
    </View>
  )

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    padding:20
  },
});

export default App;
